  
 <div class="card">
  <div class="card-header"><h4>角色管理-新增</h4></div>
    <div class="card-body">
      <div class='row'>
         
        <div class="col-md-6">
              
                <form class="form-horizontal" onsubmit="return false;">
                   <div class="form-group">
                      <label for="example-text-input">角色名称</label>
                      <input class="form-control" type="text" id='rolemc' placeholder="角色名称">
                    </div>
                   <div class="form-group">
                      <label for="example-text-input">备注</label>
                      <input class="form-control" type="text" id='bz' placeholder="备注">
                    </div>
                  <div class="form-group">
                    <label class="col-xs-12" for="example-select">状态</label>
                    <select class="form-control" id="yxbz" name="example-select" >
                      <option value="Y">有效</option>
                      <option value="N">无效</option>
                    </select>
                  </div>
                    <div class="table-responsive">
                    <table class="table table-striped">
                      <thead>
  <!--                       <tr>
    <th>
      <label class="lyear-checkbox checkbox-primary">
        <input name="checkbox" type="checkbox" id="check-all">
        <span> 全选</span>
      </label>
    </th>
  </tr> -->
                      </thead>
                      <tbody>


                        {% for menu in res %}
                          {% if menu.isroot =='root' %}
                            <tr class="success">
                              <td>
                                <label class="lyear-checkbox checkbox-primary">
                                  <input  type="checkbox" class="checkbox-parent" dataid="id-{{ menu.id_1 }}" value="{{ menu.gn_id }}">
                                  <span> {{ menu.gnmc }}</span>
                                </label>
                              </td>
                            </tr>
                          {% else %}
                            <tr>
                              <td class="p-l-40">
                                <label class="lyear-checkbox checkbox-primary">
                                  <input  type="checkbox" class="checkbox-parent checkbox-child" dataid="id-{{ menu.id_1 }}-{{ menu.id_2 }}" value="{{ menu.gn_id }}">
                                  <span> {{ menu.gnmc }}</span>
                                </label>
                              </td>
                            </tr>
                          {% endif %}
                        {% endfor %}

                      </tbody>
                    </table>
                  </div>

                  <div class="form-group">
                    <div class="col-xs-12">
                      <div class="nav nav-drawer">
                        <button class="btn btn-primary" id='btn_save' >提交</button>
                        <a class="btn btn-warning" id='btn$xt_role' style="float:right;" >返回</a>
                      </div>
                    </div>
                  </div>
                </form>
                

          </div>

    </div>
  </div>
</div>

<script type="text/javascript">
$(function(){
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function(){
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
    });
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }
    });


//新增角色 
    $('#btn_save').click(function(){
        let rolemc = $('#rolemc').val()
        let bz = $('#bz').val()
        let yxbz = $('#yxbz').val()
        let checkbox_list = $('input[type=checkbox]:checked')
        let data_list =[]
        for(let i=0;i<checkbox_list.length;i++){
            data_list[i] = checkbox_list[i].value
        }

        if(rolemc =='' || data_list == ''){
          alert('角色名称和功能菜单不能为空！')
          return
        }
        let data ={
          'rolemc':rolemc,
          'bz':bz,
          'gn_list':data_list,
          'yxbz':yxbz
        }
        $.ajax({
          //请求方式
          type : "post",
          //数据类型
          dataType: 'json',
          //请求地址
          url : "/xt_role_add",
          data: data,
          //请求成功
          success : function(rs) {
              alert(rs.mes)
              $('form')[0].reset()

          },
          //请求失败，包含具体的错误信息
          error : function(e){
              alert(e)
            }
        });

    })

  })

</script>

